<template>
    <div>
        <h1>{{ count / 3 * 10 + 100 - 5 }}</h1>
        <h1>{{ result }}</h1>
        <h1>{{ result }}</h1>
        <h1>{{ getResult() }}</h1>
        <h1>{{ getResult() }}</h1>
        <button @click="count++">count++</button>

        <h1>求和结果：{{ sum }}</h1>
        <button @click="sum = 100">修改sum</button>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const count = ref(100);

const num1 = ref(10);
const num2 = ref(10);

const sum = computed({
    get() {
        console.log("get执行了");
        return num1.value + num2.value;
    },
    set(newValue) {
        // console.log("set执行了", newValue);
        num1.value = newValue / 2;
        num2.value = newValue / 2;
    }
})



// computed的结果，也是一个ref格式的数据
const result = computed(() => {
    // console.log("计算属性被调用了");
    return count.value / 3 * 10 + 100 - 5;
});


function getResult() {
    // console.log("函数被调用了");
    return count.value / 3 * 10 + 100 - 5;
}

</script>

<style scoped></style>